<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "ac.kr.ml.vo.WriteVo" %>
<%@ page import = "ac.kr.ml.vo.UserVo" %>
<%@ page import="java.util.*" %>
<%
	session = request.getSession(false);
	UserVo vo =(UserVo)session.getAttribute("authUser");
	List<WriteVo> list = (List<WriteVo>)request.getAttribute("list");
	String state =(String)request.getAttribute("state");
	int MaxId = 0;
	if(list ==null){
		MaxId = 0;
		System.out.println(MaxId);
	}else{
		MaxId = list.get(0).getCon_id();
	}
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/medialog/css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<link href="/medialog/css/mobile.css" rel="stylesheet" type="text/css">
<script src="/medialog/jquery/jquery-1.9.0.js"></script>
<script src="/medialog/jquery/jquery.mobile-1.3.1.js"></script>

<title></title>
</head>
<body>
	
	<script>
		
	
	if(<%=MaxId%> == 0){
		var MaxContentId = 0;		
	}else{
		
		var MaxContentId = <%=MaxId%>;
		
	}	
	var key = <%=vo.getKey()%>;
	
	$(document).ready(function(){		
				
		$("#submit").click(function(){	
			
			insert();			
		});		
		
	});
	
	//글쓰기
	function insert(){
		
		
		if($("#input-Text").val() == null || $("#input-Text").val() == ""){
			alert($("#input-Text").val());
			return;
		}
		
		
		$.ajax({
			type : "POST",
			url : "main",
			async : false,
			dataType:"JSON",
			data : {"a" : "writeme", "content" : $("#input-Text").val(), "MaxContentId" : MaxContentId, "key" : key},
			success : AddContent,
			error:function(xhr, status, error) { alert("ERROR"); }
		});		
		
		$("#input-Text").val("");
		
	}
	
	function AddContent(json){
		
		var list = json.InsertList;
		
		var row_count = list.length;			
		var html= ""
		if(row_count != 0){
			for(var i = 0; i < row_count; i++){
			
				var con_id = list[i].con_id;
				var content = list[i].content;
				var time = list[i].time;
				var good = list[i].good;
				var bad = list[i].bad;
				var reply_cont = list[i].reply_cont;
				var cnt_writer = list[i].cnt_writer;

				html+= "<table id =\"contentTable-"+con_id+"\">";
				html+= "	<tr id=\"contentTR-"+con_id+"\">";
				html+= "		<td>";	
				html+= "			<span>["+time+"]</span>";
				html+= "			<p>"+content+"</p>";
				html+= "			<a href=\"#\" onclick=\"Good("+con_id+")\"> 좋아요 </a><span id=\"good-"+con_id+"\">"+good+"</span>"
									+ "<a href=\"#\" onclick=\"Bad("+con_id+")\"> 싫어요 </a><span id=\"bad-"+con_id+"\">"+bad+"</span>"
									+ "<a href=\"#\" onclick=\"replyView("+con_id+")\"> 덧글 </a><span id=\"reply-"+con_id+"\">"+reply_cont+"</span>";	
				html+="		</td>";
				html+="	</tr>";
				html+="	<tr id=\"replyTR-"+con_id+"\" style=\"display : none\">";
				html+="		<td id=\"replyTD-"+con_id+"\">";
				html+="			<input type=\"text\" id=\"re-Text-"+con_id+"\" size =\"70\" maxlength=\"70\" placeholder=\"덧글을 써주세요\"/>";
				html+="			<input type=\"button\" VALUE=\"글쓰기\" id=\"re-submit\" onclick=\"replySubmit("+con_id+")\"/>";
				html+="		</td>";
				html+="	</tr>";
				html+="</table>";
			}		
					
			//$("#contentTable-"+MaxContentId).before(html);
			$("#writeBox").append(html);
			MaxContentId = list[row_count-1].con_id;
			//alert("MaxContentId : " + MaxContentId);
		}
	}
	
	//덧글 보기
	var toggle = 0;
	function replyView(idx) {
						
		$("#replyTR-"+idx).toggle();
		if(toggle ==0){
			//alert("toggle : " +toggle);
			$.ajax({
				type : "POST",
				url : "main",
				async : false,
				dataType:"JSON",
				data : {"a" : "replyList", "con_id" : idx},
				success :ReplyList,
				error:function(xhr, status, error) { alert("ERROR"); }
			});
			toggle =1;
			return;
		}else{
			//alert("toggle : " +toggle);
			//toggle=0;
			return;
		}
	}
	function ReplyList(json){
		
		//alert("ReplyList");
		var list = json.ReplyList;
		
		var size = list.length;		
		var html= ""
		if(size != 0){
			var idx = list[0].content_id;
			for(var i = 0; i < size; i++){
				
				var re_id = list[i].re_id;
				var content_id = list[i].content_id;
				var commend = list[i].commend;
				var re_writer = list[i].re_writer;

				//html += "<td id=\"reTD-"+re_id+"\">";
				html += "		<p>"+commend+"</p>";
				//html += "</td>";
			}						
			$("#re-Text-"+idx).before(html);
			html="";
		}
		
	}
	
	//덧글쓰기
	function replySubmit(idx) {
		
		if($("#re-Text-"+idx).val() == null || $("#re-Text-"+idx).val() == ""){
			alert($("#re-Text-"+idx).val());
			return;
		}
		
		//alert("replySubmit");
		$.ajax({
			type : "POST",
			url : "main",
			async : false,
			dataType:"JSON",
			data : {"a" : "reply", "commend" : $("#re-Text-"+idx).val(), "con_id" : idx, "re_writer" : key},
			success : AddReply,
			error:function(xhr, status, error) { alert("ERROR"); }
		});	
		
		$("#re-Text-"+idx).val("");
	}	
	function AddReply(json){

		//alert("addreply");
		var list = json.InsertReply;
		
		var size = list.length;		
		var html= ""
		if(size != 0){
			var idx = list[0].content_id;
			for(var i = 0; i < size; i++){
				
				var re_id = list[i].re_id;
				var content_id = list[i].content_id;
				var commend = list[i].commend;
				var re_writer = list[i].re_writer;
				
				html += "		<p>"+commend+"</p>";
			}		
					
			$("#re-Text-"+idx).before(html);
			var reply_cont = list[size-1].reply_cont;
			$("#reply-"+idx).html(reply_cont);
			
			
		}
	}
	
	//좋아요
	function Good(idx){
		
		$.ajax({
			type : "POST",
			url : "main",
			async : false,
			dataType:"JSON",
			data : {"a" : "good", "con_id" : idx},
			success : AddGood,
			error:function(xhr, status, error) { alert("ERROR"); }
		});
		
	}
	function AddGood(json){
		
		var good = json.good;
		var con_id = json.con_id;
		$("#good-"+con_id).html(good);
		
	}
	
	//싫어요
	function Bad(idx){
		
		$.ajax({
			type : "POST",
			url : "main",
			async : false,
			dataType:"JSON",
			data : {"a" : "bad", "con_id" : idx},
			success : AddBad,
			error:function(xhr, status, error) { alert("ERROR"); }
		});
		
	}
	function AddBad(json){
		
		var bad = json.bad;
		var con_id = json.con_id;
		$("#bad-"+con_id).html(bad);
		
	}
	</script>
	
	<div id ="container">
		<div id="header">
			<jsp:include page="/include/header_m.jsp"  flush="true" />		     			
			<jsp:include page="/include/navigation_m.jsp"  flush="true" >
			<jsp:param value="<%=state %>" name="state"/>
			</jsp:include>
		</div>
		<div id="wrapper">			
			<div id="writeBox">
				<input type="text" id="input-Text" size ="70" maxlength="70" placeholder="글을 써주세요" />
				<input type="button" VALUE="글쓰기" id="submit"/>
			</div><!-- writeBox End -->
			<%
			if (list != null){
				int size = list.size();
				for(int i =0; i<size; i++){
					WriteVo v = list.get(i);	
					int con_id = v.getCon_id();
					//System.out.println("con_id : "+con_id);
			%>
				<table id = "contentTable-<%=Integer.toString(con_id)%>">
					<tr id="contentTR-<%=Integer.toString(con_id)%>">
						<td>
							<span>[<%=v.getTime()%>]</span>
							<p><%=v.getContent()%></p>
							<a href="#" onclick="Good(<%=con_id%>)">좋아요 </a><span id="good-<%=Integer.toString(con_id)%>"><%=v.getGood()%></span>
							<a href="#" onclick="Bad(<%=con_id%>)">싫어요 </a><span id="bad-<%=Integer.toString(con_id)%>"><%=v.getBad()%></span>
							<a href="#" onclick="replyView(<%=con_id%>)">덧글 </a><span id = "reply-<%=Integer.toString(con_id)%>"><%=v.getReply_cont()%></span>
						</td>
					</tr>
					<tr id="replyTR-<%=Integer.toString(con_id)%>" style="display : none">						
						<td id="replyTD-<%=Integer.toString(con_id)%>">
							<input type="text" id="re-Text-<%=Integer.toString(con_id)%>" size ="70" maxlength="70" placeholder="덧글을 써주세요"/>
							<input type="button" VALUE="글쓰기" id="re-submit" onclick="replySubmit(<%=con_id%>)"/>
						</td>
					</tr>
				</table>
			<%
				}
			}
			%>									
		</div>
		<div id="footer">
			<p>(c)mediaLog </p>
		</div>
	</div>
</body>
</html>